<template>
  <div class="node-content" v-loading="isLoading">
    <div v-show="!isHideHeader && data.length" class="tree-thead">
      <div class="item">名称</div>
      <div class="item" :style="{ width: treeTbodyW ? `${treeTbodyW / 2}px` : '' }">值</div>
    </div>
    <el-scrollbar v-show="data.length" ref="scrollbar" class="tree-scrollbar" :class="data.length ? '' : 'fill-scroll'">
      <div ref="treeTbody" class="tree-tbody">
        <NodeItem v-for="(x, i) in data" :key="i" :data="x" :w="treeTbodyW" :readonly="readonly"
          @updateForm="handleUpdate" />
      </div>
    </el-scrollbar>
    <!-- <div v-show="!data.length" class="null-box">暂无数据</div> -->
    <Empty v-show="!data.length && !isLoading" class="null-box" />
  </div>
</template>
<script lang="ts">
import { defineComponent, ref, onMounted, onBeforeUnmount, watch } from "vue";
import type { Ref } from "vue";
import type { nodeItem } from "./index.d";
import NodeItem from "./components/NodeItem.vue";

import { nextTick } from "vue";

export default defineComponent({
  name: "NodeTree",
  components: {
    NodeItem
  },
  props: {
    data: {
      type: Array as () => nodeItem[],
      required: true
    },
    isHideHeader: {
      type: Boolean,
      default: false
    },
    readonly: {
      type: Boolean,
      default: false
    },
    isLoading: {
      type: Boolean,
      default: false
    }
  },
  setup(props, { emit }) {
    // 定义响应式变量
    const treeTbodyW: Ref<number> = ref(0);
    const treeTbody = ref<HTMLElement | null>(null);
    const scrollbar = ref<HTMLElement | null>(null);
    watch(
      () => props.data.length,
      () => {
        nextTick(() => {
          updateTreeTbodyWidth();
        });
      }
    );
    // 更新宽度
    const updateTreeTbodyWidth = () => {
      if (treeTbody.value) {
        treeTbodyW.value = treeTbody.value.offsetWidth;
      }
    };

    // 监听窗口大小变化
    const handleResize = () => {
      updateTreeTbodyWidth();
    };

    // 生命周期钩子
    onMounted(() => {
      window.addEventListener("resize", handleResize);
    });

    onBeforeUnmount(() => {
      window.removeEventListener("resize", handleResize);
    });
    const handleUpdate = (data: nodeItem) => {
      emit("updateForm", data);
    };

    // 返回模板中使用的变量和方法
    return {
      treeTbodyW,
      treeTbody,
      scrollbar,
      handleUpdate
    };
  }
});
</script>

<style lang="scss" scoped>
.node-content {
  height: 100%;

  .tree-thead {
    height: 30px;
    border: 1px solid #e9e9e9;
    display: flex;
    margin-bottom: -1px;

    >div {
      height: 100%;
      padding: 0 12px;
      font-weight: 700;
      font-size: 14px;
      color: #343a4c;
      display: flex;
      align-items: center;
      box-sizing: border-box;
      white-space: nowrap;

      &:first-of-type {
        flex: 1;
        min-width: 100px;
      }

      &:last-of-type {
        border-left: 1px solid #e9e9e9;
        width: 300px;
      }
    }
  }

  .tree-scrollbar {
    border: 1px solid #e9e9e9;
    border-top: 0;
    height: calc(100% - 32px);

    // 去除x轴系统滚动条
    :deep(.el-scrollbar__wrap) {
      overflow-x: hidden;
    }

    &.fill-scroll {
      :deep(.el-scrollbar__view) {
        height: 100%;
      }
    }
  }

  .tree-tbody {
    position: relative;
    border-bottom: 1px solid #e9e9e9;
  }

  .null-box {
    border: 1px solid #e9e9e9;
    height: 100%;
    box-sizing: border-box;
  }
}
</style>
